﻿<template>
  <div>
    <el-dialog v-drag :title="dialogTitle" :visible.sync="dialogFormVisible" width="60%" @close="closeDialog">
      <el-form :model="ruleEventForm" ref="ruleEventForm" :rules="rulesEvent">
        <div class='page_tableContent'>
          <el-table :data="ruleEventForm.eventsTable" style="width:100%" empty-text="暂无事件信息，请立即添加" border stripe class="editTable">
            <el-table-column align="center" label="事件编号" :render-header="handelHelp" label-class-name="请选择事件编号">
              <template slot-scope="scope">
                <el-form-item :prop="'eventsTable[' + scope.$index + '].no'" :rules="rulesEvent.eventsName">
                  <el-select :disabled="!isEdit" v-model="scope.row.no" @focus="getSubEventList(scope.row)"
                  @change="changeSubEvents(scope.$index)" placeholder="请选择事件" filterable>
                    <el-option v-for="(item, index) in selectEventsList" :key="index" :label="item.no" :value="item.no"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="事件名称">
              <template slot-scope="scope">
                <el-form-item>
                  <span>{{scope.row.name}}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="事件分类">
              <template slot-scope="scope">
                <el-form-item>
                  <span>{{scope.row.category}}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="事件类型">
              <template slot-scope="scope">
                <el-form-item>
                  <span>{{scope.row.type}}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="事件触发时机">
              <template slot-scope="scope">
                <el-form-item>
                  <span>{{scope.row.at}}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="事件描述">
              <template slot-scope="scope">
                <el-form-item>
                  <span>{{scope.row.desc}}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="70">
              <template slot-scope="scope">
                <el-button :disabled="!isEdit" type="text" @click="handleDeleteEventsList(scope.$index, 'events')">
                  <i class="iconfont icon-shanchu"></i>删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部按钮和页码部分 -->
        <div class='page_bottomContent' v-if="isEdit">
          <div class='page_btnsContent'>
            <el-form-item class='form_noLeftMargin'>
              <el-button type="primary" @click="addEventsList ()">添加事件信息</el-button>
              <el-button type='primary' @click="resetSearchForm ('ruleEventForm')">取 消</el-button>
              <el-button type="primary" @click="submitSearchForm ('ruleEventForm')">确 定</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['showEventsDialog', 'eventsFromParent'],
  data () {
    return {
      dialogTitle: '',
      dialogFormVisible: false,
      // 可选的事件列表
      selectEventsList: [],
      // 查看形式
      isEdit: false,
      // 表单的信息
      ruleEventForm: {
        eventsTable: [
          {
            name: '',
            no: '',
            category: '',
            type: '',
            at: '',
            desc: ''
          }
        ]
      },
      rulesEvent: {
        eventsName: [
          {required: true, message: '事件编号不能为空', trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    // 表头的提示信息
    handelHelp (h, {column}) {
      if (column.labelClassName) {
        return (
          <el-tooltip effect="dark" placement="top">
            <div slot='content'>{column.labelClassName}</div>
            <span>{column.label}</span>
          </el-tooltip>
        )
      }
    },
    // 初始化表格信息
    initTable () {
      this.ruleEventForm.eventsTable = this.eventsFromParent.events
      if (this.eventsFromParent.showType === 'edit') {
        this.isEdit = true
        if (this.eventsFromParent.arrayFrom === 'events') {
          this.dialogTitle = '编辑' + this.eventsFromParent.myMetaName + '普通事件信息'
        } else {
          this.dialogTitle = '编辑' + this.eventsFromParent.myMetaName + '行事件信息'
        }
      } else {
        if (this.eventsFromParent.arrayFrom === 'events') {
          this.dialogTitle = '查看' + this.eventsFromParent.myMetaName + '普通事件信息'
        } else {
          this.dialogTitle = '查看' + this.eventsFromParent.myMetaName + '行事件信息'
        }
        this.isEdit = false
      }
    },
    // 新增栏位信息
    addEventsList () {
      this.ruleEventForm.eventsTable.push({
        name: '',
        no: '',
        category: '',
        type: '',
        at: '',
        desc: ''
      })
    },
    // 删除事件信息
    handleDeleteEventsList (index) {
      this.$confirm('此操作将永久删除该栏位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'el-button--info'
      }).then(() => {
        this.ruleEventForm.eventsTable.splice(index, 1)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }).catch(() => {})
    },
    // 当选择的事件改变时
    changeSubEvents (rowIndex) {
      // 定义一个arrayName来存储事件的类型
      let arrayName = this.eventsFromParent.arrayFrom
      // optionsList保存所有的供选择的事件信息
      let optionsList = this.eventsFromParent.totalEvents[arrayName]
      // 当改变了事件的编号时，右侧的相关信息随着改变
      if (this.ruleEventForm.eventsTable[rowIndex].no && optionsList.length) {
        optionsList.forEach(val => {
          if (val.no === this.ruleEventForm.eventsTable[rowIndex].no) {
            this.ruleEventForm.eventsTable[rowIndex] = val
          }
        })
      } else {
        this.ruleEventForm.eventsTable[rowIndex] = {
          name: '',
          no: '',
          category: '',
          type: '',
          at: '',
          desc: ''
        }
      }
    },
    // 当鼠标聚集到选择事件的选框时,需要判断哪些事件是可以选择的
    getSubEventList (row) {
      // 定义一个arrayName来存储事件的类型
      let arrayName = this.eventsFromParent.arrayFrom
      // totalEventsArray保存所有的事件信息
      let totalEventsArray = JSON.parse(JSON.stringify(this.eventsFromParent.totalEvents[arrayName]))
      // selectEventsList保存可以选择的事件信息
      this.selectEventsList = []
      if (totalEventsArray.length) {
        totalEventsArray.forEach(tVal => {
          let surePush = true
          this.ruleEventForm.eventsTable.forEach(val => {
            if (val.no === tVal.no && row.no !== val.no) {
              surePush = false
            }
          })
          if (surePush) {
            this.selectEventsList.push(tVal)
          }
        })
      }
    },
    // 点击取消按钮时
    resetSearchForm (forms) {
      this.$refs[forms].clearValidate()
      this.$emit('giveUpEvents')
    },
    // 点击上部的X关闭弹窗时
    closeDialog () {
      this.$emit('giveUpEvents')
      this.$refs.ruleEventForm.clearValidate()
    },
    // 点击确定提交的按钮时
    submitSearchForm (forms) {
      this.$refs[forms].validate((valid) => {
        if (valid) {
          let toParent = {
            index: this.eventsFromParent.index,
            arrayFrom: this.eventsFromParent.arrayFrom,
            events: this.ruleEventForm.eventsTable
          }
          this.$emit('successEvents', toParent)
        } else {
          return false
        }
      })
    }
  },
  watch: {
    showEventsDialog: {
      handler: function (val, oldVal) {
        this.dialogFormVisible = val
        if (val) {
          this.initTable()
        }
      },
      deep: true
    }
  }
}
</script>
